<template>
  <!-- 盒子将来echarts展示图形图标的节点 -->
  <div ref="map" class="map"></div>
</template>

<script lang="ts" setup>
import 'echarts-liquidfill'
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
//引入中国地图的json数据
import chinaJson from './china.json'

let map = ref()

echarts.registerMap('china', chinaJson as any)

onMounted(() => {
  let mychart = echarts.init(map.value)
  mychart.setOption({
    geo: [{
      map: 'china',
      roam: true,  //鼠标缩放地图
      label: {
        show: true,  //地图各省名称
        color: 'white',
        emphasis: {
					show: true,
          color: 'white'
				}
      },
      //地图区域样式
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgb(1, 53, 132)'
          },
          {
            offset: 1, color: 'rgb(5, 31, 68)'
          }]
        },
        borderColor: '#29fcff'
      },
      //地图高亮时的效果
      emphasis: {
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgb(0, 56, 137)'
            },
            {
              offset: 1, color: 'rgb(28, 119, 160)'
            }]
          },
        }
      }
    }],
    series: [{
      type: 'lines', //航线的系列
      data: [
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [119.306239, 26.075302], // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: '#999999',
            width: 2,
            curveness: .3 //尾迹线条曲直度
          },
        },
        {
          coords: [
            [119.306239, 26.075302], // 起点
            [116.405285, 39.904989], // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: '#999999',
            width: 2,
            curveness: .3 //尾迹线条曲直度
          },
        },
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [103.298572, 30.584355], // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: '#999999',
            width: 2,
            curveness: .3 //尾迹线条曲直度
          },
        },
        {
          coords: [
            [103.298572, 30.584355], // 起点
            [116.405285, 39.904989], // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: '#999999',
            width: 2,
            curveness: .3 //尾迹线条曲直度
          },
        },
      ],
      //开启动画特效
      effect: {
        show: true,
        symbol: 'arrow',
        color: 'white',
        symbolSize: 10,
        trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重
      },
    }],
  })
})
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 270px;
}
</style>